import type { TDashboard } from "@/typing/base"
import CardItem from "./CardItem"
import ColorBlock from '@/components/ColorBlock/index.vue'
type Props = {
  dashboardData: TDashboard
}

const Cards = (props: Props, ctx: any) => {
  // 传递参数
  const {
    dashboardData
  } = props
console.log('dashboardData', dashboardData)
  return (
  <el-row class="tw-grid tw-gap-4 tw-grid-cols-2" >
    <el-col>
      <CardItem title="项目信息">
        <p class='tw-flex tw-align-middle'>
          <span>操作系统：</span>
          {dashboardData.goOS}
          <ColorBlock type='success' styles={{ marginLeft: 4 }} value={ dashboardData.goArch }></ColorBlock>
          <ColorBlock type='primary' styles={{ marginLeft: 4 }} value={ dashboardData.goVersion }></ColorBlock>
          <ColorBlock type='danger' styles={{ marginLeft: 4 }} value={ dashboardData.mysqlVersion }></ColorBlock>
          <ColorBlock type='danger' styles={{ marginLeft: 4 }} value={ dashboardData.redisVersion }></ColorBlock>
        </p>
        <p><span>项目地址：</span><span>{ dashboardData.projectPath }</span></p>
        <p><span>项目域名：</span><span>{ dashboardData.host }</span></p>
      </CardItem>
    </el-col>
    <el-col>
      <CardItem title="内存信息">
        <p><span>总量：</span><span>{ dashboardData.memTotal }</span></p>
        <p><span>已使用：</span><span>{ dashboardData.memUsed }</span></p>
        <p class='tw-flex tw-align-middle'><span>使用率：</span><ColorBlock type='success' value={ dashboardData.memUsedPercent }></ColorBlock></p>
      </CardItem>
    </el-col>
    <el-col>
      <CardItem title="硬盘信息">
        <p><span>总量：</span><span>{ dashboardData.diskTotal }</span></p>
        <p><span>已使用：</span><span>{ dashboardData.diskUsed }</span></p>
        <p class='tw-flex tw-align-middle'><span>使用率：</span><ColorBlock type='success' value={ dashboardData.diskUsedPercent }></ColorBlock></p>
      </CardItem>
    </el-col>
    <el-col>
      <CardItem title="CPU信息">
        <p><span>CPU：</span><span>{ dashboardData.cpuName }</span></p>
        <p><span>核数：</span><span>{ dashboardData.cpuCores }</span></p>
        <p class='tw-flex tw-align-middle'><span>CPU使用率：</span><ColorBlock type='success' value={ dashboardData.cpuUsedPercent }></ColorBlock></p>
      </CardItem>
    </el-col>
  </el-row>
  )
}
export default Cards
